<template>
	<div class="fun">
		<table>
			<tr>
				<td class="td"><el-button type="primary" @click="createFun" size="medium">点击生成</el-button></td>
			</tr>
			<tr>
				<td class="td">{{joke}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				joke: "准备生成......",
				interval: ""
			}
		},
		methods: {
			createFun(){
				this.awaitFun();
				var _this = this;
				_this.$axios.get("https://autumnfish.cn/api/joke").then(
					function(response){
						window.clearInterval(_this.interval);
						_this.joke = response.data;
					},
					function(err){}
				)
			},
			awaitFun(){
				let dotCount = 1;
				this.interval = setInterval(() => {
					this.joke = ".".repeat(dotCount);
				
					dotCount++;
					if (dotCount > 6) {
						dotCount = 1;
					}
				}, 100);
			},
		},
	}
</script>

<style scoped>
	.fun table tr td {
		height: 33px;
		text-align: left;
	}
</style>
